<!--
    -  Copyright (c) 2018-2025, haohanwork.com All rights reserved.
  -->
<template>
    <div class="execution">
        <basic-container>
            <template>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <div class="blank">
                        <div class="title"><h3><span class="title-text">|</span> 基本信息</h3></div>
                    </div>
                    <el-form-item label="采购商" size="small" required prop="buyerName">
                        <el-input v-model="ruleForm.buyerName" class="input"></el-input>
                    </el-form-item>
                    <el-form-item label="商家名称" size="small" required>
                        <!--<el-input v-model="ruleForm.merchantName" class="input"></el-input>-->
                    </el-form-item>
                    <el-form-item label="简称" size="small" required>
                        <el-input v-model="ruleForm.shortName" class="input"></el-input>
                    </el-form-item>
                    <el-form-item label="联系人" size="small">
                        <el-input v-model="ruleForm.contact" class="input"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号码" size="small" required prop="telephone">
                        <el-input v-model="ruleForm.telephone" class="input"></el-input>
                    </el-form-item>
                    <el-form-item label="详细地址" size="small">
                        <el-input v-model="ruleForm.address" class="input"></el-input>
                    </el-form-item>
                    <el-form-item label="经度" size="small">
                        <el-input v-model="ruleForm.longitude" class="input"></el-input>
                    </el-form-item>
                    <el-form-item label="纬度" size="small">
                        <el-input v-model="ruleForm.latitude" class="input"></el-input>
                    </el-form-item>
                    <el-form-item label="部门" size="small" required>
                            <avue-crud-input v-model="ruleForm.area"
                                             type="tree"
                                             placeholder="请选择所属部门"
                                             class="input"
                                             :dic="treeDeptData"
                                             :props="defaultProps"></avue-crud-input>
                    </el-form-item>
                    <el-form-item label="采购商类型">
                        <el-radio-group v-model="ruleForm.buyerType">
                            <el-radio :label="'1'">员工</el-radio>
                            <el-radio :label="'2'">老板</el-radio>
                            <el-radio :label="'3'">运营</el-radio>
                            <!--<el-radio :label="4">自营</el-radio>-->
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="是否确定订单">
                        <el-radio-group v-model="ruleForm.needConfirmation">
                            <el-radio :label="'1'">是</el-radio>
                            <el-radio :label="'0'">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="是否推送消息">
                        <el-radio-group v-model="ruleForm.needPush">
                            <el-radio :label="'1'">是</el-radio>
                            <el-radio :label="'0'">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item>
                        <el-checkbox v-model="background" @change="enabledBackground">后台启用</el-checkbox>
                        <el-checkbox v-model="openApp" @change="enabledApp">小程序启用</el-checkbox>
                    </el-form-item>
                    <!--<el-form-item label="门店照">-->
                        <!--<el-upload-->
                                <!--class="imgUpload"-->
                                <!--action="https://jsonplaceholder.typicode.com/posts/"-->
                                <!--:on-preview="handlePreview"-->
                                <!--:on-remove="handleRemove"-->
                                <!--:before-remove="beforeRemove"-->
                                <!--multiple-->
                                <!--:limit="3"-->
                                <!--:on-exceed="handleExceed"-->
                                <!--:file-list="fileList">-->
                            <!--<el-button size="small" type="primary">点击上传</el-button>-->
                            <!--<div slot="tip" class="el-upload__tip">仅支持jpg,jpeg,png格式，文件小于5M</div>-->
                        <!--</el-upload>-->
                    <!--</el-form-item>-->
                    <div class="blank">
                        <div class="title"><h3><span class="title-text">|</span> 财务信息</h3></div>
                    </div>
                    <!--<el-form-item label="开户名称" size="small">-->
                        <!--<el-input v-model="ruleForm.accountName" class="input"></el-input>-->
                    <!--</el-form-item>-->
                    <!--<el-form-item label="开户银行" size="small">-->
                        <!--<el-input v-model="ruleForm.accountBank" class="input"></el-input>-->
                    <!--</el-form-item>-->
                    <!--<el-form-item label="银行账号" size="small">-->
                        <!--<el-input v-model="ruleForm.bankAccount" class="input"></el-input>-->
                    <!--</el-form-item>-->
                    <!--<el-form-item label="发票抬头" size="small">-->
                        <!--<el-input v-model="ruleForm.invoicePayable" class="input"></el-input>-->
                    <!--</el-form-item>-->
                    <!--<el-form-item label="税号" size="small">-->
                        <!--<el-input v-model="ruleForm.dutyParagraph" class="input"></el-input>-->
                    <!--</el-form-item>-->
                    <el-form-item label="账期" class="paymentDay">
                        <el-select v-model="ruleForm.payPeriod" placeholder="请选择账期">
                            <el-option
                                    v-for="item in payPeriodDict"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="submitForm" v-show="submitBtnFlag">保存</el-button>
                        <el-button @click="resetForm">取消</el-button>
                    </el-form-item>
                </el-form>
            </template>
        </basic-container>
    </div>
</template>

<script>
    import {
        putObj,
        addObj
    } from "../../../../api/saleb/buyer";
    import {fetchTree} from '@/api/admin/dept';
    import {remote} from '@/api/admin/dict';
    import {
        fetchUid,
        fetchUserId
    } from '@/api/manage/upassport';
    import Util from '@/util/pds/utils';
    let util = new Util();

    export default {
        data() {
            return {
                ruleForm: {
                    id:'',
                    pmId:'',
                    passportId:'',
                    merchantId:'',
                    merchantName: '',
                    buyerName: '',
                    shortName: '',
                    contact: '',
                    telephone:'',
                    address:'',
                    payPeriod:'1',
                    needConfirmation:'1',
                    buyerType:'1',
                    needPush:'0',
                    status:'',
                    sort:'',
                    userId:'',
                    area:'',
                    longitude:'',
                    latitude:'',

                    accountName:'',
                    accountBank:'',
                    bankAccount:'',
                    invoicePayable:'',
                    dutyParagraph:'',
                    paymentDays:''
                },
                rules:{
                    buyerName: [
                        { required: true, message: '请输入名称', trigger: 'blur' },
                        { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
                    ],
                    telephone: [
                        { required: true, message: '请输入手机号', trigger: 'blur' },
                        { min: 11, max: 20, message: '长度为 11 个字符', trigger: 'blur' }
                    ],
                },
                fileList: [{name: 'food.jpeg', url:''}],
                openApp: false,
                background: false,
                defaultProps: {
                    label: "name",
                    value: 'id',
                },
                treeDeptData: [],
                // 字典
                payPeriodDict: [],
                // 按钮
                submitBtnFlag: true
            };
        },
        created(){
            if(this.$route.query.id){
                this.ruleForm = this.$route.query;
                let passport = this.$route.query.passportId;
                let userId = this.$route.query.userId;
                if(passport){
                    this.openApp=true;
                }
                if(userId){
                    this.background=true;
                }
            }
            // 默认值
            this.ruleForm.pmId = this.getStore({name: "pmId"});
            this.handleDept();
            // 字典初始化
            this.fetchDict('scm_pay_period', this.payPeriodDict);
        },
        methods: {
            fetchDict(type, array) {
                remote(type).then(res => {
                    if(res.data.code === 0){
                        res.data.data.forEach(item =>{
                            array.push(item);
                        });
                    }
                });
            },
            handleDept() {
                fetchTree().then(response => {
                    this.treeDeptData = response.data.data;
                });
            },
            submitForm() {
                this.submitBtnFlag = false;
                this.$refs['ruleForm'].validate((valid)=>{
                    if(valid){
                        if(!this.ruleForm.id){
                            addObj(this.ruleForm).then(res => {
                                if(res.data.data===true){
                                    this.$message.success("添加成功")
                                }else{
                                    this.$message.error("添加失败")
                                    this.submitBtnFlag = true;
                                }
                            })
                        }else{
                            putObj(this.ruleForm).then(res => {
                                if(res.data.data===true){
                                    this.$message.success("提交成功")
                                }else{
                                    this.$message.error("提交失败")
                                    this.submitBtnFlag = true;
                                }
                            })
                        }
                    }else{
                        this.$message.warning("必填信息未完成");
                        this.submitBtnFlag = true;
                    }
                });
            },
            resetForm() {
                this.$router.go(-1);
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${ file.name }？`);
            },
            // 绑定uid
            enabledApp(){
                if(!this.openApp){
                    this.ruleForm.passportId='';
                }else if(this.ruleForm.telephone){
                    this.ruleForm.passportId='';
                    fetchUid({
                        'telephone':this.ruleForm.telephone
                    }).then(res => {
                        if(res.data.code === 0){
                            this.ruleForm.passportId = res.data.data;
                        }
                    }).catch(e=>{
                        this.openApp = false;
                        this.$message.warning("启用失败!找不到对应的通行证");
                    });
                }else{
                    this.openApp = false;
                    this.ruleForm.passportId='';
                    this.$message.warning("请填写手机号码！")
                }
            },
            // 绑定 系统用户
            enabledBackground(){
                if(!this.background){
                    this.ruleForm.userId = '';
                }else if(this.ruleForm.telephone){
                    this.ruleForm.userId='';
                    fetchUserId({
                        'telephone':this.ruleForm.telephone
                    }).then(res => {
                        if(res.data.code === 0){
                            this.ruleForm.userId = res.data.data;
                        }
                    }).catch(e=>{
                        this.background = false;
                        this.$message.warning("启用失败!找不到对应的用户");
                    });
                }else{
                    this.background = false;
                    this.ruleForm.userId='';
                    this.$message.warning("请填写手机号码！")
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .input{
        width: 30%;
    }
    .title{
        width: 100px;
        text-align: right;
    }
    .title-text{
        color: deepskyblue;
    }
    .blank{
        border-bottom:1px solid #f0f0f0;
        height: 30px;
        margin-bottom: 10px;
    }
    .paymentDay{
        .el-select{
            width: 20%!important;
        }
    }
    .evaluate{
        margin: 20px 0 20px 40px;
        .el-rate{
            display: inline-block;
            margin-left: 20px;
        }
    }


</style>
